<template>
    <div class="aaa">
        <div v-if="list.length == 0" class="tishi">
            --- 该用户还未发布任何帖子 ---
        </div>
        111
        <!--                  内容-->
        <div class="jinrirediang1" v-for="(p,index) in tiezi" :key="index">
            <!--            帖子标题-->
            <!--                一条帖子的框框，从这里开始v-for遍历-->
            <router-link :to="{name:'tiezixiangqing',
                                        query:{id:p.id,
                                        type:p.classificationName,
                                        content:p.content,
                                        time:p.time
                                        }}">
                <div class="neirong">
                    <div class="rediang1" >
                        <div id="rcorners1" >
                            {{p.classificationName}}
                        </div>

                        <div v-html="p.content.length > 100 ? p.content.slice(0, 100) + '...' :p.content" />
                        <div class="huifucisu">
                            回复({{p.count}})
                        </div>
                    </div>



                </div>
            </router-link>
        </div>

    </div>
</template>

<script>
    export default {
        name: "tiezi",
        data() {
            return {
                tiezi: [],
            };
        },
        props: {
            list: {
                type: Array,
                props: () => [],
            },
        },
        mounted() {
            this.tiezi = this.list;
        },
        watch: {
            "list": {
                handler(newValue) {
                    if (newValue === "") {
                        this.tiezi = []
                        this.total = 0
                        return
                    }
                    console.log("帖子"+newValue)
                    this.tiezi = newValue;
                },
                deep: true
            }
        },
    }

</script>

<style scoped>
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        min-height: 850px;
        width: 100%;

    }
    .jinrirediang1{
        height: 150px;
        width: 100%;
        margin-bottom:25px;
    }
    .rediang1{
        border: #FFFACD solid 2px;
        background: #FFFFE0;
        margin-top: 20px;
        margin-left: 10%;
        width: 80%;
        height: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #111111;
    }
    .neirong{
        height: 150px;
    }
    .huifucisu{
        height: 20px;
        width: 80px;
        float: right;
        color: black;
    }

    #rcorners1 {
        border-radius: 100px;
        background: white;
        padding: 20px;
        width: 75px;
        height: 0px;
        float: right;
        text-align: center;
        color: black;
        font-size: 18px;
        border: #EAEDF1 solid 1px;
    }
    .tishi{
        width: 100%;
        height: 50px;
        color: #888888;
        font-size: 30px;
        text-align: center;
    }

</style>
